<template>
    <div>
      <div class="title">热销推荐</div>
      <ul>
        <!--对to做动态绑定-->
        <router-link
          tag="li"
          class="item border-bottom"
          v-for="item of list"
          :key="item.id"
          :to="'/detail/' + item.id"
        >
            <img class="item-img" :src="item.imgUrl"/>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <span class="item-but">查看详情</span>
          </div>
        </router-link>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .title
     margin-top :.2rem
     line-height :.8rem
     background :#eee
     text-indent :.2rem
  .item
     overflow :hidden
     display :flex
     height :1.9rem
    .item-img
      width :1.7rem
      height :1.7rem
      padding :.1rem
    .item-info
        flex:1
        padding :0.1rem
        overflow :hidden
      .item-title
         line-height :.54rem
         font-size :.32rem
         ellipse()
      .item-desc
         line-height :.4rem
         color:#ccc
         ellipse()
       .item-but
          line-height :.44rem
          margin-top:.16rem
          background :#ff9300
          padding:0 .2rem
          border-radius :.06rem
          color :#ffffff
</style>
